<div nz-row nzType="flex" nzAlign="strecth" nzGutter="16" class="py-md">

  <div nz-col nzSpan="24">
    <nz-card [nzBordered]="false" class="card-top">
      <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle" [nzGutter]="{md: 12, lg: 16, xl: 24, xxl: 32}">

        <div nz-col>
          <nz-form-item nz-row nzFlex class="mb0">
            <nz-form-label>查询</nz-form-label>
            <nz-form-control>
              <input nz-input [(ngModel)]="params.keywords" (ngModelChange)="debounceLoad()" placeholder="输入公司名称、别名或其它信息" class="width-lg">
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col>
          <button nz-button nzType="primary" (click)="createSite()">
            <i class="anticon anticon-plus"></i>
            <span>创建站点</span>
          </button>
          <nz-dropdown nzPlacement="bottomRight" class="ml-sm">
            <button nz-button nz-dropdown>
              <i class="anticon anticon-ellipsis"></i>
            </button>
            <ul nz-menu>
              <!-- <li nz-menu-item (click)="load()">刷新列表</li> -->
              <!-- <li nz-menu-item>批量删除</li> -->
            </ul>
          </nz-dropdown>
        </div>

      </div>
    </nz-card>
  </div>

  <div nz-col class="width-lg">
    <nz-card [nzTitle]="companyTitle" [nzBordered]="false" class="card-nopd height-full mb0">

      <ng-template #companyTitle>
        <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle">
          <div nz-col>公司</div>
          <div nz-col>
            <button nz-button nzSize="small" (click)="createCompany()" class="title-button">
              <i class="anticon anticon-plus"></i>
            </button>
          </div>
        </div>
      </ng-template>

      <ul nz-menu nzMode="inline" class="border-right-0">
        <li nz-menu-item *ngFor="let item of data.companies" [nzSelected]="params.companyId === item.id" (click)="changeCompany(item.id)"
          class="my0">
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col class="flex-1 text-truncate">{{item.companyNameChs}}</div>
            <nz-badge nz-col [nzCount]="item.siteCount" [nzStyle]="config.badgeStyle"></nz-badge>
          </div>
        </li>
      </ul>

    </nz-card>
  </div>

  <div nz-col class="flex-1">
    <nz-card nzTitle="站点列表" [nzBordered]="false" class="height-full mb0">
      <nz-table #sitesTable [nzData]="data.displaySites" [nzShowTotal]="showTotal" [nzLoading]="config.sitesLoading" nzShowQuickJumper
        nzShowSizeChanger>

        <thead>
          <tr>
            <th>站点名称</th>
            <th>站点代码</th>
            <th>描述</th>
            <th>最后更新人</th>
            <th nzShowSort [(nzSort)]="params.sort" (nzSortChange)="sortLastModifiedTime()">最后更新时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of sitesTable.data">
            <td>{{data.siteName}}</td>
            <td>{{data.siteCode}}</td>
            <td>{{data.description}}</td>
            <td>{{data.lastModifiedBy}}</td>
            <td>{{data.lastModifiedTime | date:'yyyy-MM-dd hh:mm:ss'}}</td>
            <td>
              <a (click)="updateSite(data)">修改</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-popconfirm nzTitle="您确定要删除该站点吗？" nzPlacement="topRight" (nzOnConfirm)="deleteSite(data)">
                <a nz-popconfirm>删除</a>
              </nz-popconfirm>
            </td>
          </tr>
        </tbody>

        <ng-template #showTotal let-implicit let-range>
          <div>共 {{ implicit }} 条记录</div>
        </ng-template>

      </nz-table>
    </nz-card>
  </div>

</div>